<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="header-left">
          <view class="back-button" @click="goBack">
            <text class="fas fa-arrow-left"></text>
          </view>
          <text class="header-title">提现记录</text>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 筛选条件 -->
      <section class="filter-section">
        <view class="filter-tabs">
          <view 
            class="filter-tab" 
            :class="{ 'active': selectedFilter === 'all' }"
            @click="selectFilter('all')"
          >
            全部
          </view>
          <view 
            class="filter-tab" 
            :class="{ 'active': selectedFilter === 'success' }"
            @click="selectFilter('success')"
          >
            提现成功
          </view>
          <view 
            class="filter-tab" 
            :class="{ 'active': selectedFilter === 'processing' }"
            @click="selectFilter('processing')"
          >
            处理中
          </view>
          <view 
            class="filter-tab" 
            :class="{ 'active': selectedFilter === 'failed' }"
            @click="selectFilter('failed')"
          >
            提现失败
          </view>
        </view>
        
        <!-- 时间筛选 -->
        <view class="date-filter">
          <view class="date-picker" @click="showDatePicker">
            <text class="fas fa-calendar-alt"></text>
            <text class="date-text">{{ selectedDateRange }}</text>
            <text class="fas fa-angle-down"></text>
          </view>
        </view>
      </section>

      <!-- 提现记录列表 -->
      <section class="records-list-section">
        <div class="records-list">
          <!-- 提现记录项 -->
          <view class="record-item" v-for="record in filteredRecords" :key="record.id">
            <div class="record-main">
              <div class="record-left">
                <view class="record-icon" :class="record.status">
                  <text class="fas" :class="record.icon"></text>
                </view>
                <div class="record-info">
                  <text class="record-type">{{ record.type }}</text>
                  <text class="record-time">{{ record.time }}</text>
                </div>
              </div>
              <div class="record-right">
                <text class="record-amount">+{{ record.amount }}</text>
                <text class="record-status" :class="record.status">{{ record.statusText }}</text>
              </div>
            </div>
            <div class="record-footer">
              <text class="record-id">提现单号: {{ record.orderId }}</text>
              <text class="record-arrival-time">{{ record.arrivalTime }}</text>
            </div>
          </view>
        </div>
        
        <!-- 空状态 -->
        <view class="empty-state" v-if="filteredRecords.length === 0">
          <view class="empty-icon">
            <text class="fas fa-file-invoice"></text>
          </view>
          <text class="empty-text">暂无提现记录</text>
        </view>
        
        <!-- 加载更多 -->
        <view class="load-more" v-if="hasMoreRecords">
          <text class="loading-text">{{ isLoading ? '加载中...' : '上拉加载更多' }}</text>
        </view>
      </section>
    </main>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedFilter: 'all', // all, success, processing, failed
      selectedDateRange: '全部时间',
      isLoading: false,
      hasMoreRecords: true,
      withdrawalRecords: [
        {
          id: 1,
          type: '微信零钱提现',
          time: '2023-06-20 16:45',
          amount: '¥30.00',
          status: 'processing',
          statusText: '处理中',
          orderId: '2023062016457892',
          arrivalTime: '预计2小时内到账',
          icon: 'fa-clock'
        },
        {
          id: 2,
          type: '微信零钱提现',
          time: '2023-06-10 15:30',
          amount: '¥100.00',
          status: 'success',
          statusText: '提现成功',
          orderId: '2023061015304589',
          arrivalTime: '到账时间: 2023-06-10 15:42',
          icon: 'fa-check'
        },
        {
          id: 3,
          type: '微信零钱提现',
          time: '2023-05-25 09:15',
          amount: '¥50.00',
          status: 'success',
          statusText: '提现成功',
          orderId: '2023052509156327',
          arrivalTime: '到账时间: 2023-05-25 09:28',
          icon: 'fa-check'
        },
        {
          id: 4,
          type: '微信零钱提现',
          time: '2023-05-15 14:20',
          amount: '¥75.00',
          status: 'success',
          statusText: '提现成功',
          orderId: '2023051514203654',
          arrivalTime: '到账时间: 2023-05-15 14:35',
          icon: 'fa-check'
        },
        {
          id: 5,
          type: '微信零钱提现',
          time: '2023-05-01 10:05',
          amount: '¥150.00',
          status: 'failed',
          statusText: '提现失败',
          orderId: '2023050110059876',
          arrivalTime: '原因: 账户信息有误',
          icon: 'fa-times'
        },
        {
          id: 6,
          type: '微信零钱提现',
          time: '2023-04-20 16:30',
          amount: '¥200.00',
          status: 'success',
          statusText: '提现成功',
          orderId: '2023042016301234',
          arrivalTime: '到账时间: 2023-04-20 16:45',
          icon: 'fa-check'
        },
        {
          id: 7,
          type: '微信零钱提现',
          time: '2023-04-10 09:45',
          amount: '¥80.00',
          status: 'success',
          statusText: '提现成功',
          orderId: '2023041009456789',
          arrivalTime: '到账时间: 2023-04-10 10:00',
          icon: 'fa-check'
        },
        {
          id: 8,
          type: '微信零钱提现',
          time: '2023-03-25 11:20',
          amount: '¥60.00',
          status: 'success',
          statusText: '提现成功',
          orderId: '2023032511203456',
          arrivalTime: '到账时间: 2023-03-25 11:35',
          icon: 'fa-check'
        }
      ]
    };
  },
  
  computed: {
    // 根据筛选条件过滤记录
    filteredRecords() {
      if (this.selectedFilter === 'all') {
        return this.withdrawalRecords;
      } else {
        return this.withdrawalRecords.filter(record => record.status === this.selectedFilter);
      }
    }
  },
  
  onLoad() {
    // 页面加载时的初始化
  },
  
  onReachBottom() {
    // 上拉加载更多
    this.loadMoreRecords();
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 选择筛选条件
    selectFilter(filter) {
      this.selectedFilter = filter;
    },
    
    // 显示日期选择器
    showDatePicker() {
      const dateRanges = ['全部时间', '近一周', '近一个月', '近三个月', '近半年', '自定义'];
      
      uni.showActionSheet({
        itemList: dateRanges,
        success: (res) => {
          this.selectedDateRange = dateRanges[res.tapIndex];
          // 如果选择自定义，这里可以打开日期选择器
          if (res.tapIndex === 5) {
            // 这里可以实现自定义日期选择逻辑
            uni.showToast({
              title: '自定义日期功能开发中',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 加载更多记录
    loadMoreRecords() {
      if (this.isLoading || !this.hasMoreRecords) {
        return;
      }
      
      this.isLoading = true;
      
      // 模拟网络请求延迟
      setTimeout(() => {
        // 模拟没有更多数据了
        this.hasMoreRecords = false;
        this.isLoading = false;
        
        if (!this.hasMoreRecords) {
          uni.showToast({
            title: '没有更多记录了',
            icon: 'none'
          });
        }
      }, 1000);
    }
  }
};
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 主容器 */
.container {
  width: 100%;
  min-height: 100vh;
  background-color: #F5F7FA;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 顶部导航栏 */
.header {
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-button {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1D2129;
}

.back-button .fas {
  font-size: 32rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1D2129;
  margin-left: 40rpx;
}

/* 主内容区 */
.main-content {
  padding-top: 140rpx;
  padding-bottom: 40rpx;
}

/* 筛选区域 */
.filter-section {
  background-color: #FFFFFF;
  padding: 30rpx 40rpx;
  margin-bottom: 20rpx;
}

.filter-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.filter-tab {
  font-size: 28rpx;
  color: #86909C;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
}

.filter-tab.active {
  color: #FF7D00;
  background-color: rgba(255, 125, 0, 0.1);
}

.date-filter {
  display: flex;
  align-items: center;
}

.date-picker {
  display: flex;
  align-items: center;
  color: #86909C;
  font-size: 28rpx;
}

.date-picker .fas {
  font-size: 24rpx;
  margin-right: 10rpx;
}

.date-text {
  margin: 0 10rpx;
}

/* 记录列表区域 */
.records-list-section {
  background-color: #FFFFFF;
  padding: 30rpx 40rpx;
}

.records-list {
  margin-bottom: 20rpx;
}

.record-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #F2F3F5;
}

.record-item:last-child {
  border-bottom: none;
}

.record-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.record-left {
  display: flex;
  align-items: center;
}

.record-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.record-icon.success {
  background-color: rgba(52, 199, 89, 0.1);
}

.record-icon.processing {
  background-color: rgba(0, 122, 255, 0.1);
}

.record-icon.failed {
  background-color: rgba(255, 69, 58, 0.1);
}

.record-icon .fas {
  font-size: 32rpx;
}

.record-icon.success .fas {
  color: #34C759;
}

.record-icon.processing .fas {
  color: #007AFF;
}

.record-icon.failed .fas {
  color: #FF453A;
}

.record-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.record-type {
  font-size: 32rpx;
  color: #1D2129;
  margin-bottom: 8rpx;
}

.record-time {
  font-size: 24rpx;
  color: #86909C;
}

.record-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.record-amount {
  font-size: 36rpx;
  font-weight: 600;
  color: #FF7D00;
  margin-bottom: 8rpx;
}

.record-status {
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  border-radius: 15rpx;
}

.record-status.success {
  color: #34C759;
  background-color: rgba(52, 199, 89, 0.1);
}

.record-status.processing {
  color: #007AFF;
  background-color: rgba(0, 122, 255, 0.1);
}

.record-status.failed {
  color: #FF453A;
  background-color: rgba(255, 69, 58, 0.1);
}

.record-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.record-id {
  font-size: 24rpx;
  color: #86909C;
}

.record-arrival-time {
  font-size: 24rpx;
  color: #86909C;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 150rpx 0;
}

.empty-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background-color: #F2F3F5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}

.empty-icon .fas {
  font-size: 60rpx;
  color: #86909C;
}

.empty-text {
  font-size: 28rpx;
  color: #86909C;
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 30rpx 0;
}

.loading-text {
  font-size: 26rpx;
  color: #86909C;
}
</style>